<template>
    <div style="background-color:bisque;">
        <h1>这个是我的儿子</h1>
        <SonBoy @boy="BoyHandle"/>
        <h1>这个是我的女儿</h1>
        <SonGirl @girl="GirlHandle"/>
        <p>我儿子的成绩是{{ gradeBoy }}</p>
        <p>我女儿的成绩是{{ gradeGirl }}</p>
        <p>看看我的私房钱还有多少，哎，只剩下{{ store.money }}元了!</p>
        <p>给成绩高的发点小钱吧，<button @click.once="send(100)">奖励</button></p>
    </div>
</template>

<script>
import SonGirl from '@/components/SonGirl.vue';
import SonBoy from '@/components/SonBoy.vue';
import {useMyStore} from '../store/mystore.js';

export default{
    components:{
        SonBoy,
        SonGirl,
    },
    methods:{
        BoyHandle(val){
            this.gradeBoy = val
        },
        GirlHandle(val){
            this.gradeGirl = val
        },
        send(val){
            if(this.gradeBoy > this.gradeGirl && this.gradeBoy >= 60){
                this.store.decrement(val),
                this.moneyBoy += val
            }else if(this.gradeBoy < this.gradeGirl && this.gradeGirl >= 60){
                this.store.decrement(val),
                this.moneyGirl += val
            }else if(this.gradeBoy == this.gradeGirl && this.gradeGirl >= 60){
                this.store.decrement(val),
                this.moneyGirl += val/2,
                this.moneyBoy += val/2
            }else{
                alert('考不及格还想要奖励？！！！')
            }


        }
    },   
    data() {
        return {
            gradeBoy:'',
            gradeGirl:'',
            store:useMyStore(),
            moneyBoy:800,
            moneyGirl:1000
            }
        }
}
</script>